<template>
  <view>
    <nav-bar :title="navBarTitle" />
    <view class="container">
      <view class="list">
        <block v-if="list.length > 0">
          <view
            class="list-item"
            :style="{
              border: `1rpx solid #000000`,
              borderColor: themeColor,
              borderRadius: '15rpx',
            }"
            v-for="(item, index) in list"
            :key="index"
          >
            <view
              class="shopName"
              style="color: #13131390"
              v-if="item.pubDomainShopName"
              >{{ item.pubDomainShopName }}</view
            >
            <div class="detail flex-align-center">
              <div class="wifi-icon">
                <u-icon name="wifi" size="30" :color="themeColor"></u-icon>
              </div>
              <div class="flex-1">
                <div>名称：{{ item.wifiName }}</div>
                <div>密码：{{ item.password }}</div>
              </div>
              <div>
                <div
                  class="title flex-align-center"
                  @click="handleEditBindWiFi(item)"
                  :style="{ color: themeColor }"
                >
                  <view class="icon iconfont icon-bianji2 marginRight-6"></view>
                  <text>编辑</text>
                </div>
                <div
                  class="title flex-align-center"
                  @click="handleShowUnBindWiFiModal(item)"
                  style="color: #aeaeae"
                >
                  <view class="icon iconfont icon-bianji2 marginRight-6"></view>
                  <text>解绑</text>
                </div>
              </div>
            </div>
          </view>
        </block>
        <view v-else class="empty">
          <u-empty
            text="暂无已绑定WiFi"
            mode="wifi"
            icon="http://cdn.uviewui.com/uview/empty/wifi.png"
          />
        </view>
      </view>
    </view>
    <modal
      :show-title="false"
      :visible.sync="isShowUnBindModal"
      @confirm="isShowUnBindModal = false"
      @cancel="handleUnBindWiFi"
      left-btn-text="是"
      right-btn-text="否"
      :content-customer-style="{ padding: '35rpx 0' }"
    >
      <div class="business-container">
        <div class="title">是否解绑当前wifi？解绑后可再次连接</div>
        <div class="font-red title">注：解绑wifi二维码还可再次绑定wifi</div>
      </div>
    </modal>
  </view>
</template>

<script>
import { mapState } from "@dcloudio/vue-cli-plugin-uni/packages/vuex3/dist/vuex.common";
import { myBindWifiList, wifiUnbind } from "@/service/api/sp-store/wifi";
import {
  BIND_PAGE_TYPE,
  EVENT_TRACK_EVENT_OF_RESULT_FOR_WIFI,
  EVENT_TRACK_TYPE_OF_BUSINESS_FOR_WIFI,
} from "@/pages/sp-store/const/wifi";
import handleEventTrack from "@/mixin/handleEventTrack";

export default {
  mixins: [handleEventTrack],
  props: {},
  data() {
    return {
      navBarTitle: "我的WiFi",
      list: [],
      unBindTempDetail: {},
      isShowUnBindModal: false,
    };
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  onLoad() {
    this.fetData();
  },
  onShow() {
    this.fetData();
  },
  methods: {
    async fetData() {
      const res = await myBindWifiList();
      if (res) {
        this.list = res;
      }
    },
    handleEditBindWiFi(item) {
      uni.navigateTo({
        url: `pages/sp-store/pages/bind-wifi/index?pageType=${BIND_PAGE_TYPE.EDIT}&id=${item.id}&code=${item.wifiCode}`,
      });
    },
    handleShowUnBindWiFiModal(item) {
      this.unBindTempDetail = item;
      this.$nextTick(() => {
        this.isShowUnBindModal = true;
      });
    },
    async handleUnBindWiFi() {
      const res = await wifiUnbind({ ...this.unBindTempDetail }).catch(
        (err) => {
          this.handleEventTrack({
            ...this.unBindTempDetail,
            sign: "wifi",
            opType: EVENT_TRACK_TYPE_OF_BUSINESS_FOR_WIFI.UNBIND,
            status: EVENT_TRACK_EVENT_OF_RESULT_FOR_WIFI.BUSINESS_SUCCESS,
            failReason: "解绑失败，" + JSON.stringify(err),
          }); //数据埋点
        }
      );
      console.log("解绑成功", res);
      if (res) {
        this.handleEventTrack({
          ...this.unBindTempDetail,
          sign: "wifi",
          opType: EVENT_TRACK_TYPE_OF_BUSINESS_FOR_WIFI.UNBIND,
          status: EVENT_TRACK_EVENT_OF_RESULT_FOR_WIFI.BUSINESS_SUCCESS,
          failReason: "解绑成功",
        }); //数据埋点
        uni.showToast({
          icon: "success",
          title: "解绑成功",
        });
        this.isShowUnBindModal = false;
        this.unBindTempDetail = null;
        await this.fetData();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  padding: 5rpx 0;
}
.font-red {
  color: red;
}
.close-icon {
  position: fixed;
  bottom: 480rpx;
  left: 50%;
  transform: translateX(-50%);
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  padding-bottom: 60rpx;
  width: 90vw;
  height: 300rpx;
}
.empty {
  margin-top: 60rpx;
}
.list {
  width: 686rpx;
  height: 300rpx;
  padding-bottom: 60rpx;
  margin: 0 auto;
  &-item {
    padding: 0 10rpx;
    margin: 20rpx auto;
    border: 1rpx solid #888888;
    .shopName {
      padding: 25rpx 35rpx;
      border-bottom: 1rpx solid #ebebeb;
    }
    .detail {
      padding: 46rpx 35rpx;
    }
    .wifi-icon {
      border-radius: 999rpx;
      padding: 10rpx;
      margin-right: 21rpx;
      background: #fcf7eb;
    }
  }
}
</style>
